<template>
	<div class="product-header" :class="{'simple':simpleFlag,'pay':payFlag}">
		<h4 class="brand" v-if="!simple">中国平安</h4>
		<h4 class="name" v-cloak :class="detailObj.PRODUCT_NAME.length>17?'shrinker':detailObj.PRODUCT_NAME.length>12?'shrink':''">{{ detailObj.PRODUCT_NAME | more(17) }}</h4>
		<p class="min-max" v-if="!simple">在同类产品的前<span v-text="detailObj.RANK.indexOf('0%')==0?detailObj.RANK.split('-')[1]:detailObj.RANK"></span></p>
		<div class="canvas-wrap abs">
			<div class="rel">
				<canvas ref="canvas" :width="width" :height="width" style="transform: rotate(-90deg);"></canvas>
				<span v-text="rank"></span><span style="display: inline-block; font-size: 0.2rem; padding-left: 0.02rem;">分</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'product-header',
		props: ['detail','simple','pay'],
		data(){
			return {
				simpleFlag: this.simple,
				payFlag: this.pay,
				num: 0,
				width: 100,
				angle: 0,
				req: null,
				rank: 0,
			}
		},
		computed: {
			canvas(){
				return this.$refs.canvas;
			},
			detailObj(){
				return this.detail;
			},
			maxAngle(){
				return this.detail.PRODUCT_SCORE*2*Math.PI/100;
			},
			step(){
				return this.detail.PRODUCT_SCORE*2*Math.PI/100/40;
			},
			maxRank(){
				return this.detail.PRODUCT_SCORE;
			},
			rankStep(){
				return this.detail.PRODUCT_SCORE/40;
			}
		},
		methods: {
			getRem: function(){
				if(this.simpleFlag){
					this.width=0.9*parseInt(window.html.style.fontSize);
				} else {
					this.width=1.2*parseInt(window.html.style.fontSize);
				}
			},
			drawCircle: function(){
				let ctx=this.canvas.getContext('2d');
				ctx.beginPath();
				ctx.lineWidth=6;
				ctx.strokeStyle = 'rgba(255,255,255,0.5)';
				ctx.arc(this.width/2,this.width/2,this.width/2-4,0,2*Math.PI);
				ctx.stroke();
			},
			drawArc0: function(){
				if(this.$route.path!='/detail'){
					return;
				}
				let ctx=this.canvas.getContext('2d');
				ctx.clearRect(0,0,this.width,this.width);
				ctx.beginPath();
				ctx.lineWidth=6;
				ctx.strokeStyle = '#7efd95';
				ctx.arc(this.width/2,this.width/2,this.width/2-4,0,this.angle);
				ctx.stroke();
				ctx.beginPath();
				ctx.lineWidth=6;
				ctx.strokeStyle = 'rgba(255,255,255,0.5)';
				ctx.arc(this.width/2,this.width/2,this.width/2-4,this.angle,2*Math.PI);
				ctx.stroke();
				this.angle+=this.step;
				this.rank=~~(this.rank+this.rankStep);
				if(this.angle>=this.maxAngle){
					this.rank=this.maxRank;
					window.cancelAnimationFrame(this.req);
					return;
				}
				this.req = window.requestAnimationFrame(this.drawArc);
			},
			drawArc: function(){
				if(this.$route.path!='/detail' && this.$route.path!='/pay-once' && this.$route.path!='/report'){
					return;
				}
				let ctx=this.canvas.getContext('2d');
				ctx.beginPath();
				ctx.lineWidth=6;
				ctx.strokeStyle = '#7efd95';
				ctx.arc(this.width/2,this.width/2,this.width/2-4,this.angle,this.angle+this.step);
				ctx.stroke();
				this.angle+=this.step;
				this.rank=~~(this.rank+this.rankStep);
				if(this.angle>=this.maxAngle){
					this.rank=this.maxRank;
					window.cancelAnimationFrame(this.req);
					return;
				}
				this.req = window.requestAnimationFrame(this.drawArc);
			},
			drawArcOnce: function(){
				this.rank=this.maxRank;
				let ctx=this.canvas.getContext('2d');
				ctx.beginPath();
				ctx.lineWidth=6;
				if(this.simpleFlag){
					ctx.lineWidth=4;
				}
				ctx.strokeStyle = '#7efd95';
				ctx.arc(this.width/2,this.width/2,this.width/2-4,0,this.maxAngle);
				ctx.stroke();
			}
		},
		mounted(){
			let that=this;
			this.rank=0;
			this.getRem();
			setTimeout(function(){
				that.drawCircle();
			},50);
			if(this.simpleFlag){
				setTimeout(function(){
					that.drawArcOnce();
				},50);
				return;
			}
			setTimeout(function(){
				that.req = window.requestAnimationFrame(that.drawArc);
			},200);
		},
		activated(){
			
		},
		deactivated(){
			window.cancelAnimationFrame(this.req);
			this.rank=0;
			this.angle=0;
			// this.canvas.getContext('2d').clearRect(0,0,this.width,this.width);
		}
	}
</script>

<style scoped>
	.product-header {
		position: relative;
		box-sizing: border-box;
		width: 7.5rem;
		height: 1.6rem;
		padding: 0.2rem 0.45rem 0.30rem 0.7rem;
		background: url(./image/bg.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		color: #fff;
		font-size: 0.2rem;
	}
	.product-header.simple {
		height: 1.18rem;
	}
	.product-header.pay {
		background: #5398f5;
	}
	.product-header.pay h4.name {
		color: #fff;
	}
	.product-header.pay p.min-max {
		color: #fff;
	}
	.product-header h4 {
		margin: 0;
		font-weight: normal;
	}
	.product-header h4.brand {
		font-size: 0.28rem;
		margin-bottom: 0.08rem;
	}
	.product-header h4.name {
		font-size: 0.32rem;
		font-weight: normal;
		color: #e1f5ff;
		margin-top: 0;
		margin-bottom: 0.04rem;
	}
	.product-header h4.name.shrink {
		transform-origin: 0 50%;
		transform: scaleX(0.95);
	}
	.product-header h4.name.shrinker {
		transform-origin: 0 50%;
		transform: scaleX(0.9);
	}
	.product-header.simple h4.name{
		margin-top: 0.2rem;
	}
	.product-header p {
		margin: 0;
		font-size: 0.24rem;
		line-height: 0.4rem;
		color: #b5cfff;
	}
	.product-header p.min-max {
		color: #6a8acf;
	}
	.product-header .canvas-wrap {
		width: 1.2rem;
		height: 1.2rem;
		line-height: 1.2rem;
		top: 0.22rem;
		right: 0.3rem;
		text-align: center;
		font-size: 0.36rem;
		color: #7efd95;
	}
	.product-header .canvas-wrap .rel {
		width: 1.2rem;
		height: 1.2rem;
	}
	.product-header .canvas-wrap .rel canvas {
		position: absolute;
		top: 0;
		left: 0;
	}
	.product-header.simple .canvas-wrap {
		width: 0.9rem;
		height: 0.9rem;
		top: 0.15rem;
		right: 0.4rem;
		line-height: 0.9rem;
		font-size: 0.28rem;
	}
	.product-header.simple .canvas-wrap .rel {
		width: 0.9rem;
		height: 0.9rem;
	}
</style>